<template>
  <div class="bgc">
    <Header />
    <div class="home">
      <!-- 头部 -->
      <div class="homeContainer">
        <!-- 导航 -->
        <div class="homeContainer-nav">
          <div class="nav-left">主题市场</div>
          <div class="nav-right">
            <div class="nav-item">
              <img class="nav-img" src="@/statics/images/天猫超市.png" alt="" />
            </div>
            <div class="nav-item">
              <img class="nav-img" src="@/statics/images/天猫国际.png" alt="" />
            </div>
            <div class="nav-item">天猫会员</div>
            <div class="nav-item">喵鲜生</div>
            <div class="nav-item">医药馆</div>
            <div class="nav-item">魅力惠</div>
            <div class="nav-item">飞猪旅行</div>
            <div class="nav-item">苏宁易购</div>
            <div class="nav-item">天猫内容</div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="homeContainer-content">
          <!-- 三级分类 -->
          <div class="homeContent-CategoryList">
            <div
              class="list"
              v-for="categoryItem in categoryListStore.categoryList"
              :key="categoryItem.categoryId"
              @click="
                toSearch(categoryItem.categoryId, categoryItem.categoryName)
              "
            >
              <sicon type="钻石" size="16"></sicon>
              <span>{{ categoryItem.categoryName }}</span>
            </div>
            <!-- <div class="list">
              <sicon type="男装" size="16"></sicon>
              <span>男装</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="女鞋" size="16"></sicon>
              <span>女鞋</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="口红" size="16"></sicon>
              <span>美妆</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="钻石" size="16"></sicon>
              <span>腕表</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="手机" size="16"></sicon>
              <span>手机</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="母婴玩具" size="16"></sicon>
              <span>母婴玩具</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="食品饮料" size="16"></sicon>
              <span>零食</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="生鲜水果" size="16"></sicon>
              <span>生鲜水果</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="3.1-天猫家电" size="16"></sicon>
              <span>大家电</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="家具建材" size="16"></sicon>
              <span>家具</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="汽车配件" size="16"></sicon>
              <span>汽车</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="家纺" size="16"></sicon>
              <span>家纺</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="医药保健" size="16"></sicon>
              <span>医药保健</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="居家" size="16"></sicon>
              <span>厨具</span>/<span>内衣</span>
            </div>
            <div class="list">
              <sicon type="图书音像" size="16"></sicon>
              <span>图书音像</span>/<span>内衣</span>
            </div> -->
          </div>
          <!-- 轮播图 -->
          <div class="homeContent-banner">
            <div class="banner1">
              <swiper
                :slidesPerView="1"
                :spaceBetween="30"
                :loop="true"
                :centeredSlides="true"
                :pagination="{
                  clickable: true,
                }"
                :autoplay="{
                  delay: 2500,
                  disableOnInteraction: false,
                }"
                :navigation="true"
                :modules="modules"
                class="mySwiper"
              >
                <swiper-slide>
                  <img src="@/statics/images/大轮播图4.jpg_.webp" alt="" />
                </swiper-slide>
                <swiper-slide>
                  <img src="@/statics/images/大轮播图3.jpg_.webp" alt="" />
                </swiper-slide>
                <swiper-slide>
                  <img src="@/statics/images/大轮播图2.jpg" alt="" />
                </swiper-slide>
                <swiper-slide>
                  <img src="@/statics/images/大轮播图.jpg" alt="" />
                </swiper-slide>
              </swiper>
            </div>
            <div class="banner2">
              <swiper
                :slidesPerView="1"
                :spaceBetween="30"
                :loop="true"
                :centeredSlides="true"
                :autoplay="{
                  delay: 2500,
                  disableOnInteraction: false,
                }"
                :navigation="true"
                :modules="modules"
                class="mySwiper"
              >
                <swiper-slide>
                  <img src="@/statics/images/大轮播图4.jpg_.webp" alt="" />
                  <img src="@/statics/images/小轮播图.jpg_.webp" alt="" />
                </swiper-slide>
                <swiper-slide>
                  <img src="@/statics/images/大轮播图3.jpg_.webp" alt="" />
                  <img src="@/statics/images/小轮播图.jpg_.webp" alt="" />
                </swiper-slide>
                <swiper-slide>
                  <img src="@/statics/images/大轮播图2.jpg" alt="" />
                  <img src="@/statics/images/小轮播图.jpg_.webp" alt="" />
                </swiper-slide>
                <swiper-slide>
                  <img src="@/statics/images/大轮播图.jpg" alt="" />
                  <img src="@/statics/images/小轮播图.jpg_.webp" alt="" />
                </swiper-slide>
              </swiper>
            </div>
          </div>
          <!-- 头像 -->
          <div class="homeContent-vip">
            <div class="vip">
              <img class="vip-avatar" src="@/statics/images/头像.jpg" alt="" />
              <div class="vip-name">Hi 你好</div>
            </div>
            <div class="vip-img">
              <img
                src="@/statics/images/O1CN014AxN4C1Z7pWRr4wzb_!!6000000003148-0-tps-356-141.jpg_360x10000Q75.jpg_.webp"
                alt=""
              />
            </div>
            <div class="vip-gonggao">
              <span>公告</span>
              新鲜事儿都在这儿~
            </div>
            <div class="vip-shoucang">
              <div class="shoucang-item">
                <sicon type="收藏" size="20"></sicon>
                <span>收藏宝贝</span>
              </div>
              <div class="shoucang-item">
                <sicon type="进入店铺" size="20"></sicon>
                <span>买过的店铺</span>
              </div>
              <div class="shoucang-item">
                <sicon type="店铺" size="20"></sicon>
                <span>收藏的店铺</span>
              </div>
              <div class="shoucang-item">
                <sicon type="足迹" size="20"></sicon>
                <span>我的足迹</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 楼层 -->
      <div class="home-floor">
        <!-- 天猫超市 -->
        <div class="supermarket">
          <div class="spuer-header">
            <img src="@/statics/supermarket/天猫超市.webp" alt="" />
          </div>
          <div class="marketDetail">
            <div class="goods-detail" @click="toDetail">
              <img
                src="@/statics/images/电饭煲.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                苏泊尔蒸锅家用304不锈钢蒸笼加厚双层大号电磁炉家用煤气灶
              </div>
              <span class="goods-price">￥199</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/牛奶.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
              </div>
              <span class="goods-price">￥89.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/牛奶.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
              </div>
              <span class="goods-price">￥89.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/牛奶.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
              </div>
              <span class="goods-price">￥89.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/牛奶.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
              </div>
              <span class="goods-price">￥89.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/牛奶.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
              </div>
              <span class="goods-price">￥89.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/牛奶.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                【超市独家】蒙牛小充食脱脂纯牛奶250ml*24包
              </div>
              <span class="goods-price">￥89.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/O果汁.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                汇源100%苹果汁果蔬汁200ml*12盒浓缩果汁原汁饮料
              </div>
              <span class="goods-price">￥53.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/O果汁.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                汇源100%苹果汁果蔬汁200ml*12盒浓缩果汁原汁饮料
              </div>
              <span class="goods-price">￥53.9</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/O果汁.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                汇源100%苹果汁果蔬汁200ml*12盒浓缩果汁原汁饮料
              </div>
              <span class="goods-price">￥53.9</span>
            </div>
          </div>
        </div>
        <!-- 天猫国际 -->
        <div class="supermarket">
          <div class="spuer-header">
            <img src="@/statics/supermarket/t天猫国际.webp" alt="" />
          </div>
          <div class="marketDetail">
            <!-- 国际1 -->
            <div class="goods-nation-detail">
              <img
                src="@/statics/supermarket/国际1.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="nation-desc">
                <div class="nation-desc1">进口精选</div>
                <div class="line"></div>
                <div class="nation-desc2">
                  <div>大牌好货</div>
                  <div>轻松购入</div>
                </div>
              </div>
            </div>
            <div class="goods-nation-detail0">
              <img
                src="@/statics/supermarket/国际1-1.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">官方直营优选</div>
              <span class="goods-price">极致购物感受</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/国际1-2.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                11.08克拉椭圆形合成红宝石手链925银彩色宝石手饰女
              </div>
              <span class="goods-price">￥899</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/国际1-2.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                11.08克拉椭圆形合成红宝石手链925银彩色宝石手饰女
              </div>
              <span class="goods-price">￥899</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/国际1-2.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                11.08克拉椭圆形合成红宝石手链925银彩色宝石手饰女
              </div>
              <span class="goods-price">￥899</span>
            </div>
            <div class="goods-nation-detail">
              <img
                src="@/statics/supermarket/国际2.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="nation-desc">
                <div class="nation-desc1">一触即达</div>
                <div class="line"></div>
                <div class="nation-desc2">
                  <div>国际自营</div>
                  <div>官方优选</div>
                </div>
              </div>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/O1CN01WN6Yfv29DAHaL9AMs_!!2209684858033.jpg_220x10000Q75.jpg_.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                [热销单品]正品CHAMPION美版冠军高端Life加绒连帽衫卫衣男女集货
              </div>
              <span class="goods-price">￥188</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/衣服.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                [热销单品]正品CHAMPION美版冠军高端Life加绒连帽衫卫衣男女集货
              </div>
              <span class="goods-price">￥188</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/衣服.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                [热销单品]正品CHAMPION美版冠军高端Life加绒连帽衫卫衣男女集货
              </div>
              <span class="goods-price">￥188</span>
            </div>
            <div class="goods-detail">
              <img
                src="@/statics/supermarket/衣服.webp"
                alt=""
                class="goods-img"
              />
              <div class="goods-desc">
                [热销单品]正品CHAMPION美版冠军高端Life加绒连帽衫卫衣男女集货
              </div>
              <span class="goods-price">￥188</span>
            </div>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="ulike">
          <div class="ulike-title">
            <div>猜你喜欢</div>
            <div>个性推荐</div>
          </div>
          <div class="ulike-recommend">
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
            <div class="recommend-item">
              <img
                src="@/statics/supermarket/猜你喜欢·11.jpg_.webp"
                alt=""
                class="item-img"
              />
              <div class="recommend-desc">
                【自营】canmake/井田眼线胶笔膏砍妹酒红色持久不晕染防水眼胶
              </div>
              <div class="recommend-price">￥64.0</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts">
export default {
  name: "ShopHome",
};
</script>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue"; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from "swiper";
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import "swiper/less";
import "swiper/less/navigation";
import "swiper/less/pagination";

//  引入pinia中的数据
import { useCategoryListStore } from "@/stores/categoryList";
import router from "@/router";
import { onMounted } from "vue";
const categoryListStore = useCategoryListStore();
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [Autoplay, Pagination, Navigation, A11y];

// 跳转到搜索页面
const toSearch = (id: number, name: string) => {
  if (!id) return;
  const query = {
    categoryName: name,
    categoryId: id,
  };
  router.push({
    name: "Search",
    query,
  });

  // router.push("/search");
};
// 跳转到详情页面
const toDetail = () => {
  router.push("/detail");
};
//  页面挂载后就要拿到数据
onMounted(() => {
  categoryListStore.getCategoryList();
});
</script>
<style lang="less" scoped>
.bgc {
  padding-top: 1px;
  width: 100%;
  height: 100%;
  background-color: #f6e4e4;
}

.home {
  max-width: 1190px;
  // height: calc(100vh - 1010px);
  background: #fff;
  margin: 40px auto;
  padding-top: 1px;
  border-radius: 18px;
}

.home .homeContainer {
  width: 100%;
  margin: 20px;
}

.home .homeContainer .homeContainer-nav {
  display: flex;
  height: 30px;
}

.home .homeContainer-nav .nav-left {
  font-size: 16px;
  font-weight: 700;
  height: 30px;
  line-height: 30px;
  margin-right: 160px;
  color: #fe0137;
}

.home .homeContainer-nav .nav-right {
  display: flex;
}

.home .homeContainer-nav .nav-right .nav-item {
  height: 30px;
  line-height: 30px;
  margin: 0 10px;
  font-size: 14px;
}

.home .homeContainer-nav .nav-right .nav-item .nav-img {
  width: 100px;
  height: 30px;
}

.home .homeContainer-content {
  display: flex;
  margin-top: 15px;
}

.home .homeContainer-content .homeContent-CategoryList {
  width: 212px;
  margin-bottom: 18px;
  overflow: hidden;
}
.home .homeContainer-content .homeContent-CategoryList .list {
  height: 32px;
  line-height: 32px;
}

.home .homeContainer-content .homeContent-CategoryList .list span {
  font-size: 13px;
  margin: 0 15px;
}

.home .homeContainer .homeContainer-content .homeContent-banner {
  margin-left: 10px;
  margin-right: 20px;
}
.home .homeContainer .homeContainer-content .homeContent-banner .banner1 {
  width: 520px;
  height: 280px;
  margin-bottom: 40px;
}

.home .homeContainer .homeContainer-content .homeContent-banner .banner1 img {
  width: 520px;
  height: 280px;
  border-radius: 12px;
}

.home .homeContainer .homeContainer-content .homeContent-banner .banner2 {
  width: 520px;
  height: 200px;
  display: flex;
}
.home .homeContainer .homeContainer-content .homeContent-banner .banner2 img {
  width: 250px;
  height: 200px;
}

.home
  .homeContainer
  .homeContainer-content
  .homeContent-banner
  .banner2
  img:first-child {
  border-radius: 12px 0 0 12px;
  margin-right: 20px;
}
.home
  .homeContainer
  .homeContainer-content
  .homeContent-banner
  .banner2
  img:last-child {
  border-radius: 0 12px 12px 0;
}

.home .homeContainer .homeContainer-content .homeContent-vip {
  width: 384px;
  height: 512px;
  background-color: #f3f3f3;
  border-radius: 12px;
}

.home .homeContainer .homeContainer-content .homeContent-vip .vip {
  margin-top: 20px;
  margin-bottom: 20px;
}
.home .homeContainer .homeContainer-content .homeContent-vip .vip .vip-avatar {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  display: block;
  margin: 0 auto;
}

.home .homeContainer .homeContainer-content .homeContent-vip .vip .vip-name {
  text-align: center;
  margin-top: 12px;
}

.home .homeContainer .homeContainer-content .homeContent-vip .vip-img {
  margin: 0 auto 25px;
}
.home .homeContainer .homeContainer-content .homeContent-vip .vip-img img {
  width: 356px;
  height: 141px;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.home .homeContainer .homeContainer-content .homeContent-vip .vip-gonggao {
  font-size: 14px;
  margin-left: 12px;
  margin-bottom: 40px;
}

.home .homeContainer .homeContainer-content .homeContent-vip .vip-gonggao span {
  font-size: 14px;
  font-weight: 700;
  margin-right: 6px;
}

.home .homeContainer .homeContainer-content .homeContent-vip .vip-shoucang {
  display: flex;
  justify-content: space-around;
  padding-left: 8px;
}

.home
  .homeContainer
  .homeContainer-content
  .homeContent-vip
  .vip-shoucang
  .shoucang-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  span {
    margin-top: 10px;
  }
}

// 楼层样式
.home .home-floor {
  padding: 10px;
}

.home .home-floor .supermarket .spuer-header {
  margin-bottom: 20px;
}
.home .home-floor .supermarket .spuer-header img {
  width: 107px;
  height: 34px;
}

.home .home-floor .supermarket .marketDetail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.home .home-floor .supermarket .marketDetail .goods-detail {
  width: 220px;
  height: 304px;
}
.home .home-floor .supermarket .marketDetail .goods-detail .goods-img {
  width: 220px;
  height: 220px;
  border-radius: 18px;
}

.home .home-floor .supermarket .marketDetail .goods-detail .goods-desc {
  margin-top: 11px;
  font-size: 16px;
  font-weight: 500;
  height: 22px;
  line-height: 22px;
  width: 208px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #000;
}

.home .home-floor .supermarket .marketDetail .goods-detail .goods-price {
  margin-top: 5px;
  font-size: 20px;
  height: 24px;
  line-height: 24px;
  color: #ff5000;
}

.home .home-floor .supermarket .marketDetail .goods-nation-detail {
  width: 222px;
  height: 302px;
  position: relative;
}
.home .home-floor .supermarket .marketDetail .goods-nation-detail0 .goods-desc {
  margin-top: 11px;
  font-size: 18px;
  height: 22px;
  line-height: 22px;
  width: 208px;
}
.home
  .home-floor
  .supermarket
  .marketDetail
  .goods-nation-detail0
  .goods-price {
  margin-top: 5px;
  font-size: 16px;
  height: 24px;
  line-height: 24px;
  color: #ff5000;
}
.home .home-floor .supermarket .marketDetail .goods-nation-detail .goods-img {
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

.home .home-floor .supermarket .marketDetail .goods-nation-detail .nation-desc {
  width: 190px;
  height: 72px;
  position: absolute;
  left: 0;
  bottom: 20px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
}
.home
  .home-floor
  .supermarket
  .marketDetail
  .goods-nation-detail
  .nation-desc
  .nation-desc1 {
  width: 36px;
  height: 50px;
  line-height: 25px;
  padding: 14px 15px 0 12px;
  font-size: 18px;
}
.home
  .home-floor
  .supermarket
  .marketDetail
  .goods-nation-detail
  .nation-desc
  .line {
  width: 1px;
  height: 41px;
  margin-top: 17px;
  box-sizing: border-box;
  border-right: 1px solid hsla(0, 0%, 59.2%, 0.4);
}

.home
  .home-floor
  .supermarket
  .marketDetail
  .goods-nation-detail
  .nation-desc
  .nation-desc2 {
  margin: 16px 20px 0 13px;
}
.home
  .home-floor
  .supermarket
  .marketDetail
  .goods-nation-detail
  .nation-desc
  .nation-desc2
  div:first-child {
  width: 72px;
  line-height: 25px;
  height: 25px;
  font-size: 18px;
  font-weight: 500;
}

.home
  .home-floor
  .supermarket
  .marketDetail
  .goods-nation-detail
  .nation-desc
  .nation-desc2
  div:last-child {
  width: 56px;
  line-height: 20px;
  height: 20px;
  font-size: 14px;
}

.home .home-floor .ulike {
  margin: 20px 0;
}

.home .home-floor .ulike .ulike-title {
  display: flex;
  // justify-content: center; 水平居中
  align-items: center;
}
.home .home-floor .ulike .ulike-title div:first-child {
  font-size: 24px;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
}
.home .home-floor .ulike .ulike-title div:last-child {
  font-size: 14px;
  width: 68px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  border-radius: 20px;
  background-color: #fe0137;
}

.home .home-floor .ulike .ulike-recommend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.home .home-floor .ulike .ulike-recommend .recommend-item {
  width: 220px;
  height: 304px;
  border-radius: 18px;
  margin-bottom: 22px;
}
.home .home-floor .ulike .ulike-recommend .recommend-item .item-img {
  width: 220px;
  height: 220px;
  border-radius: 18px;
}
.home .home-floor .ulike .ulike-recommend .recommend-item .recommend-desc {
  width: 208px;
  height: 44px;
  line-height: 22px;
  margin: 11px 0 0 6px;
  overflow: hidden;
  color: #000;
  font-size: 16px;
}
.home .home-floor .ulike .ulike-recommend .recommend-item .recommend-price {
  margin: 5px 0 0 6px;
  font-size: 20px;
  line-height: 24px;
  color: #ff5000;
}
</style>
